<template>
	<view class="my-integral">
		<view class="header">
			<image class="integral" src="/static/img/mine/integral.png"></image>
			<view class="info">目前积分：<text class="num">{{totalIntegral}}</text></view>
		</view>
		<view class="detail-title">明细</view>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key='index'>
				<view class="title">
					<view class="caption">
						<text class="text">{{item.title}}</text>
						<text class="name">{{item.nick_name}}</text>
					</view>
					<text class="time">{{item.create_time | timeFormat}}</text>
				</view>
				<text class="num-change">+{{item.integral}}</text>
			</view>
			<view v-show='empty'>
				<empty></empty>
			</view>
			<view v-show="!empty">
				<load-more :status='loadStatus'></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import storage from '@/commen/utils/storage'
	import loadMore from '@/components/uni-load-more/uni-load-more'
	import empty from '@/components/empty/empty'
	import {
		getIntegralList,
		getUserInfo
	} from '@/commen/js/config'
	import {toDate} from '@/commen/utils/utils'

	export default {
		data() {
			return {
				totalIntegral: 0, // 总积分
				list: [], // 列表
				page: 1, // 页数
				requestKey: true, // 请求钥匙
				loadStatus: 'more', // more loading noMore
				empty: false, // 当前列表是否为空
			}
		},
		components: {
			loadMore,
			empty
		},
		onLoad() {
			this.getUserInfo()
			this.getIntergralList()
		},
		onPullDownRefresh() {
			this.init()
			this.getIntergralList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		onReachBottom() {
			if (!this.requestKey) return
			this.page++
			this.getIntergralList()
		},
		filters:{
			timeFormat(val) {
				const date = toDate(val)
				return `${date[0]}-${date[1]}-${date[2]} ${date[3]}:${date[4]}:${date[5]}`
			}
		},
		methods: {
			// 初始化
			init() {
				this.page = 1
				this.requestKey = true
				this.empty = false
				this.list = []
			},
			// 获取用户信息
			async getUserInfo() {
				const params = {
					token: storage.get('token')
				}
				const [err, res] = await getUserInfo(params)
				if (res) {
					this.totalIntegral = res.info.integral
				}
			},
			// 获取积分列表
			async getIntergralList() {
				this.loadStatus = 'loading'
				const params = {
					token: storage.get('token'),
					page: this.page
				}
				const [err, res] = await getIntegralList(params)
				if (res) {
					if (res.list.length == 0 && this.page == 1) {
						this.requestKey = false
						this.empty = true
						return
					} else if (res.list.length == 0 && this.page > 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.list = this.list.concat(res.list)
					if (res.list.length < 15 && this.page == 1) {
						this.requestKey = false
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					this.empty = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/config.scss';
	@import '@/static/scss/mixin.scss';

	.my-integral {
		@include box-w(100%, $bg-g);

		.header {
			@include box-h(340rpx, $bg-h);
			@include flex-col(flex-start);
			padding-top: 22rpx;
			margin: 10rpx 0;

			image {
				@include square(212rpx);
			}

			.info {
				margin-top: 14rpx;
				@include font-set($font-b, $color-c, 500);

				.num {
					@include font-set($font-d, $color-c, 500);
				}
			}
		}

		.detail-title {
			@include box-h(80rpx, $bg-c);
			@include flex-row(flex-start);
			@include font-set($font-c, $color-g);
			padding: 0 32rpx;
		}

		.list {
			margin-top: 10rpx;
			padding-bottom: 48rpx;
			background-color: $bg-c;

			.item {
				padding: 52rpx 32rpx 0;
				@include flex-row(space-between);

				.title {
					@include flex-col(space-between, flex-start);

					.caption {
						@include flex-row(flex-start);
						.text{
							@include font-set($font-b, $color-c);
						}
						.name{
							@include font-set($font-c, $color-g);
							margin-left:20rpx;
						}
					}

					.time {
						@include font-set($font-b, $color-d);
						margin-right: 44rpx;
						margin-top: 22rpx;
					}
				}

				.num-change {
					align-self: flex-start;
					@include font-set($font-b, $color-i, 500);
				}
			}
		}
	}
</style>
